<style lang="less" scoped>
#admin-version {
.item {
    margin-top:20px;
}
.l {
    display: inline-block;
}
.add-input {
    width:200px;
    margin: 20px 20px 0 20px;
}
}
.table-input {
  width:200px;
}
</style>

<template lang="pug">
#admin-version.admin
  div
    h1 版本管理
    el-input(class="l add-input",v-model="addversion")
    el-button(type="primary",@click="addHandle('version',addversion)") 新增
  template
    el-table(:data='versions', style='width: 100%')
      el-table-column(type="index",align="center", label='索引', width="100")
      el-table-column(align="center",  label='版本名称')
        template(scope="scope")
          div(v-if="!scope.row.isEdit") {{scope.row.name}}
          el-input(class="table-input",v-if="scope.row.isEdit",v-model="scope.row.name")
      el-table-column(label='操作',align="center")
        template(slot-scope='scope')
          el-button(size='small',
                    v-if="!scope.row.isEdit"
                    type='primary',
                    @click="handleEdit('version', scope.row)") 编辑
          el-button(size='small',
                    v-if="scope.row.isEdit"
                    type='success',
                    @click="handleConform('version', scope.row)") 确认
          el-button(size='small',
                    type='danger',
                    :disabled="scope.row.isEdit",
                    @click="handleDelete('version', scope.row)") 删除
  div(class="item")
    h1 年级管理
    el-input(class="l add-input",v-model="addgrade")
    el-button(type="primary",@click="addHandle('grade',addgrade)") 新增
  template
    el-table(:data='grades', style='width: 100%')
      el-table-column(type="index",align="center", label='索引', width="100")
      el-table-column(align="center",  label='年级名称')
        template(scope="scope")
          div(v-if="!scope.row.isEdit") {{scope.row.name}}
          el-input(class="table-input",v-if="scope.row.isEdit",v-model="scope.row.name")
      el-table-column(align="center",  label='课程数')
        template(scope="scope")
          div(v-if="!scope.row.isEdit") {{scope.row.class}}
          el-input(class="table-input",v-if="scope.row.isEdit",v-model="scope.row.class")
      el-table-column(label='操作',align="center")
        template(slot-scope='scope')
          el-button(size='small',
                    v-if="!scope.row.isEdit"
                    type='primary',
                    @click="handleEdit('grade', scope.row)") 编辑
          el-button(size='small',
                    v-if="scope.row.isEdit"
                    type='success',
                    @click="handleConform('grade', scope.row)") 确认
          el-button(size='small',
                  :disabled="scope.row.isEdit",
                  type='danger',
                  @click="handleDelete('grade', scope.row)") 删除
  div(class="item")
    h1 标签管理
    el-input(class="l add-input",v-model="addtag")
    el-button(type="primary",@click="addHandle('tag',addtag)") 新增
  template
    el-table(:data='tags', style='width: 100%')
      el-table-column(type="index",align="center", label='索引', width="100")
      el-table-column(align="center",  label='标签名称')
        template(scope="scope")
          div(v-if="!scope.row.isEdit") {{scope.row.name}}
          el-input(class="table-input",v-if="scope.row.isEdit",v-model="scope.row.name")
      el-table-column(label='操作',align="center")
        template(slot-scope='scope')
            el-button(size='small',
                    v-if="!scope.row.isEdit"
                    type='primary',
                    @click="handleEdit('tag', scope.row)") 编辑
            el-button(size='small',
                    v-if="scope.row.isEdit"
                    type='success',
                    @click="handleConform('tag', scope.row)") 确认
            el-button(size='small',
                    type='danger',
                    :disabled="scope.row.isEdit",
                    @click="handleDelete('tag', scope.row)") 删除
</template>

<script>
import {mapMutations} from "vuex";
export default {
  name: "admin-version",
  data() {
    return {
      addversion:'', // 输入的版本
      addgrade:'', // 输入的年级
      addtag:'', // 输入的标签
    };
  },
  computed:{
      // 输入的标签
      versions(){
        const data = this.$store.state.versions;
           data.forEach(item => {
             if(!item.isEdit) this.$set(item,'isEdit',false);
             this.$set(item,'editText',item.name);
          });
          return data;
      },
      // 年级
      grades() {
           const data = this.$store.state.grades;
           data.forEach(item => {
             if(!item.isEdit) this.$set(item,'isEdit',false);
             this.$set(item,'editText',item.name);
             this.$set(item,'class',item.class);
          });
          return data;
      },
      // 标签
      tags() {
           const data = this.$store.state.tags;
           data.forEach(item => {
             if(!item.isEdit) this.$set(item,'isEdit',false);
             this.$set(item,'editText',item.name);
          });
          return data;
      },
  },
  methods: {
    ...mapMutations(['UPDATE_ARRAY_ITEM','SET_ITEM']),
    fetch(type) {
      const _this = this;
      this.$store.dispatch("FETCH_ADMIN_VERSION", {
        url: `query/${type}`,
        msg: _this.$message,
        key: type+'s',
        data: {
          start: 0
        },
      });
    },
    handleDelete(type, row) {
      const _this = this;
      this.$store.dispatch("DELETE_ADMIN_ITEM", {
        url: `delete/${type}/${row._id}`,
        msg: _this.$message,
        cb: ()=> {
            this.fetch(type);
        }
      });
    },
    // 编辑
    handleEdit(type,row) {
      row.isEdit = true;
      this.UPDATE_ARRAY_ITEM({key:'versions',id:row._id,val:row});
    },
     // 确认
    handleConform(type,row) {
      row.isEdit = false;
      if(!row.editText) row.editText = row.name;
      else row.name = row.editText;
      this.UPDATE_ARRAY_ITEM({key:'versions',id:row._id,val:row});
      let params = {};
      params.name = row.name;
      if(row.class) params.class = Number(row.class);
      this.$store.dispatch('UPDATE_ADMIN_ITEM', {
        url: `update/${type}/${row._id}`,
        msg: this.$message,
        data: params,
        cb: () => {
              this.fetch(type);
        }
      });
    },
    addHandle(type,value) {
        if(!value) return;
        const _this = this;
       this.$store.dispatch("ADD_ADMIN_VERSION", {
        url: `add/${type}`,
        type:type,
        data: {name:value},
        msg: _this.$message,
        cb: _this.fetch
      });
    }
  },
  mounted() {
    this.fetch('version');
    this.fetch('grade');
    this.fetch('tag');
  }
};
</script>

<style lang="stylus" scoped>
.el-table {
  margin-top: 20px;
}

</style>
